<template>
  <div>
    <el-row class="container">
      <el-col>
        <el-tabs type="border-card">
          <el-tab-pane label="格子设置">
            <gridSetUp :column-des-objs="gridColumnObjs" :data="gridTableData"
                       :category-data="storageTableData" :category-column-des-objs="storageColumnObjs"
                       @initData="getData" :selectOption="workStation"
            />
          </el-tab-pane>
          <!--          <el-tab-pane label="存储产品类别">-->
          <!--            <storage-product-category :column-des-objs="storageColumnObjs" :data="storageTableData"/>-->
          <!--          </el-tab-pane>-->
        </el-tabs>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  import gridSetUp from '@/views/basics/components/gridSetUp'
  import storageProductCategory from '@/views/productManagement/components/storageProductCategory'
  import { GetAllGridArea, GetAllWorkStation, GetAllList } from '@/api/storageConfig'
  import { ERR_OK } from '@/utils/commons'
  import { getGridStatus } from '@/enums/productionStat'

  export default {
    name: 'StorageConfig',
    components: { gridSetUp, storageProductCategory },
    data() {
      return {
        gridTableData: [],
        gridColumnObjs: [
          { label: '分区名称', key: 'Name' },
          { label: '工位', key: 'wName' },
          { label: '横向格子', key: 'HNum' },
          { label: '纵向格子', key: 'VNum' },
          { label: '开头字母', key: 'HeadName' },
          { label: '是否启用', key: 'Status', filter: getGridStatus, tag: true },
          { label: '操作', key: 'operator' }
        ],
        storageTableData: [],
        storageColumnObjs: [
          { label: '类别编码', key: 'Code' },
          { label: '产品类别', key: 'Name' }
        ],
        workStation: [],
        workList: []
      }
    },
    async created() {
      await this.getAllList()
      await this.getData();
    },
    methods: {
      async getAllGridArea() {
        const { Result, Code } = await GetAllGridArea()
        if (Code === ERR_OK) {
          this.gridTableData = Result
        }
      },
      async getAllList() {
        const { Result, Code } = await GetAllList()
        if (Code === ERR_OK) {
          this.storageTableData = Result.Items

        }
      },
      async getAllWorkStation() {
        const { Result, Code } = await GetAllWorkStation()
        if (Code === ERR_OK) {
          this.workStation = Result
          this.workList = this.workStation.map(e => ({
            label: e.Name,
            value: e.WorkstationId
          }))
        }
      },
      async getData(){
        await Promise.all(Array.of(
          this.getAllWorkStation(),
          this.getAllGridArea()
        )).then(() => {
          this.gridTableData = this.gridTableData.map(e => {
            const { WorkstationId } = e
            const { label: wName } = this.workList.find(v => +v.value === +WorkstationId) || {}//  label
            return { ...e, wName }  //   wName:
          })
        })
      }
    }
  }

</script>

<style scoped lang="scss">
  .container {
    padding: 30px;
  }
</style>
